<template>
  <div :class="{fullscreen: props.fullscreen}" class="tinymce-container" :style="{width: props.containerWidth}">
    <editor :id="props.tinymceId" :key="props.tinymceKey" class="tinymce-textarea" v-model="contentValue" :init="editorInit"></editor>
  </div>
</template>

<script setup>
  /**
   * 1、需要将语言包复制一份到node_modules/tinymce下
   * 2、需要将node_modules/tinymce下的skins和plugins/emoticons复制到本地（public目录下）
   */
  // 引入组件
  import tinymce from 'tinymce/tinymce';
  import Editor from '@tinymce/tinymce-vue';
  import 'tinymce/skins/content/default/content.css';
  import 'tinymce/themes/silver'; // 默认主题
  import 'tinymce/icons/default'; // 引入编辑器图标icon，不引入则不显示对应图标
  import 'tinymce/models/dom'; // 引入dom模块 从 Tinymce6，开始必须有此模块导入
  import 'tinymce/langs/zh_CN'; // 引入编辑器语言包

  // 引入富文本编辑器插件
  import 'tinymce/icons/default/icons';
  import 'tinymce/plugins/code'; // 编辑源码
  import 'tinymce/plugins/quickbars'; // 快速工具栏
  import 'tinymce/plugins/preview'; // 预览
  import 'tinymce/plugins/searchreplace'; // 查找替换
  import 'tinymce/plugins/autolink'; // 自动链接
  import 'tinymce/plugins/fullscreen'; // 全屏
  import 'tinymce/plugins/image'; // 插入编辑图片
  import 'tinymce/plugins/link'; // 超链接
  import 'tinymce/plugins/anchor'; // 锚点
  import 'tinymce/plugins/media'; // 插入编辑媒体
  import 'tinymce/plugins/codesample'; // 代码示例
  import 'tinymce/plugins/table'; // 表格
  import 'tinymce/plugins/charmap'; // 特殊字符
  import 'tinymce/plugins/advlist'; // 高级列表
  import 'tinymce/plugins/lists'; // 列表插件
  import 'tinymce/plugins/wordcount'; // 字数统计
  import 'tinymce/plugins/emoticons'; // 表情
  import 'tinymce/plugins/pagebreak'; // 插入分页符
  import 'tinymce/plugins/insertdatetime'; // 插入日期时间

  // import 'tinymce/plugins/autoresize'; // 编辑器高度自适应,注：plugins里引入此插件时，Init里设置的height将失效
  // import 'tinymce/plugins/autosave'; // 自动存稿
  // import 'tinymce/plugins/directionality'; // 文字方向
  // import 'tinymce/plugins/help'; // 帮助
  // import 'tinymce/plugins/importcss'; // 引入css
  // import 'tinymce/plugins/nonbreaking'; // 插入不间断空格
  // import 'tinymce/plugins/save'; // 保存
  // import 'tinymce/plugins/template'; // 内容模板
  // import 'tinymce/plugins/visualblocks'; // 显示元素范围
  // import 'tinymce/plugins/visualchars'; // 显示不可见字符

  // import { computed, onMounted, onUnmounted } from 'vue';
  import { reactive, computed, onMounted, onUnmounted, defineEmits } from 'vue';
  import { apiUpload } from '@/api/common';
  // import editorPlugins from './plugins';
  import editorToolbar from './toolbar';
  const appBaseUrl = import.meta.env.VITE_APP_BASE;

  const props = defineProps({
    // 多个编辑器同时使用必须要传 ID
    tinymceId: {
      type: String,
      default: `vue-tinymce-${(Math.random() * 1000).toFixed(0)}`,
    },
    tinymceKey: {
      type: String,
      default: `vue-tinymce-${new Date().getTime().toString()}`,
    },
    modelValue: {
      type: String,
      default: '',
    },
    fullscreen: {
      type: Boolean,
      default: false,
    },
    containerWidth: {
      type: String,
      default: '100%',
    },
    toolbar: {
      type: [String, Array],
      default() {
        return editorToolbar;
      },
    },
    plugins: {
      type: [String, Array],
      // default: 'code quickbars preview searchreplace autolink fullscreen image link anchor media codesample table charmap advlist lists wordcount emoticons pagebreak insertdatetime',
      default: () => {
        // return 'code quickbars preview searchreplace autolink fullscreen image link anchor media codesample table charmap advlist lists wordcount emoticons pagebreak insertdatetime';
        return 'code quickbars preview searchreplace autolink fullscreen image link anchor media table advlist lists wordcount pagebreak insertdatetime';
      },
    },
    // 1级菜单
    menubar: {
      type: String,
      // default: 'file edit insert view format table',
      default: '',
    },
    height: {
      type: [Number, String],
      default: 360,
    },
    width: {
      type: [Number, String],
      required: false,
      default: 'auto',
    },
  });

  const emit = defineEmits(['update:modelValue']);

  const contentValue = computed({
    get() {
      return props.modelValue;
    },
    set(val) {
      emit('update:modelValue', val);
    },
  });

  const editorInit = reactive({
    selector: `#${props.tinymceId}`,
    language: 'zh_CN',
    language_url: `${appBaseUrl}tinymce/langs/zh_CN.js`,
    skin_url: `${appBaseUrl}tinymce/skins/ui/oxide`,
    content_css: `${appBaseUrl}tinymce/skins/content/default/content.css`,
    emoticons_database_url: `${appBaseUrl}tinymce/plugins/emoticons/js/emojis.js`,
    body_class: 'panel-body ',
    object_resizing: false,
    toolbar: props.toolbar,
    plugins: props.plugins,
    menubar: props.menubar,
    height: props.height,
    toolbar_mode: 'sliding', // 工具栏模式(floating / sliding / scrolling / wrap)
    font_size_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
    font_family_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Oswald=oswald;Bitter=bitter;',
    line_height_formats: '1 1.1 1.2 1.3 1.4 1.5 1.75 2 2.2 2.5 3',
    indentation: '10px', // 缩进
    end_container_on_empty_block: true, // 空元素回车将其拆分
    convert_urls: false, // 自动转换URL(关闭此选项，TinyMCE将不会自动处理URL，也就是说，插入的URL原本是什么就是什么，不会自动转换相对或绝对路径)
    // 自动链接插件
    default_link_target: '_blank',
    branding: false, // tiny技术支持信息是否显示
    file_picker_types: 'file image media',
    // quickbars_insert_toolbar: 'quickimage quicktable', // [插入]快捷工具栏
    quickbars_insert_toolbar: '',

    // 图片上传自定义实现
    images_upload_handler: (blobInfo, progress) => new Promise((resolve, reject) => {
      if (blobInfo.blob().size / 1024 / 1024 > 2) {
        // reject({
        //   message: '上传失败，图片大小请控制在 2M 以内',
        //   remove: true,
        // });
        reject(new Error('上传失败，图片大小请控制在 2M 以内'));
        // return false;
      }
      progress(0);
      const formData = new FormData();
      formData.append('method', 'tinymce');
      formData.append('place', 'local');
      formData.append('file', blobInfo.blob());
      apiUpload(formData).then(res => {
        resolve(res.data.full_filepath);
        progress(100);
      }).catch(() => {
        reject(new Error('error'));
        // return false;
      });
      // return true;
    }),
  });
  // 插入数据
  const insertContent = (content) => {
    const editor = tinymce.get(props.tinymceId);
    // const range = editor.selection.getRng();
    // const divNode = editor.getDoc().createElement('div');
    // divNode.innerHTML = content;
    // range.insertNode(divNode);
    editor.insertContent(content);
  };

  // const editorValue = ref(props.value);
  // // 监听外部传递进来的的数据变化
  // watch(
  //     () => props.value,
  //     () => {
  //       editorValue.value = props.value;
  //       emit('getContent', editorValue.value);
  //     }
  // );
  // // 监听富文本中的数据变化
  // watch(
  //     () => editorValue.value,
  //     () => {
  //       emit('getContent', editorValue.value);
  //     }
  // );

  onMounted(async () => {
    tinymce.init({}); // 初始化
  });
  onUnmounted(() => {
    tinymce.remove(); // 销毁
  });

  // 暴露方法【给父级调用】
  defineExpose({
    insertContent,
  });
</script>

<style lang="less">
  body {
    margin: 0;
  }
</style>
